import React from 'react';
import { Statistic, Row, Col } from 'antd';

import _ from 'lodash';

export default class NumberView extends React.PureComponent {
  state = {};

  render() {
    const { cellData } = this.props;
    let valuex = [];
    if (_.isNumber(cellData) || _.isArray(cellData)) {
      if (_.isArray(cellData)) {
        valuex = cellData;
      } else {
        valuex.push(cellData);
      }
    }
    let precision = 0;
    if (this.props.precision !== null) {
      precision = _.toNumber(this.props.precision);
    }
    let value = [];
    valuex.forEach((element, index) => {
      if (element !== null) {
        let valuex = element ? _.round(element * 1, precision) : 0;
        valuex = _.toNumber(valuex);
        value.push(valuex);
      }
    });
    return (
      <Row
        type="flex"
        justify="end"
        style={{ textAlign: 'right' }}
        onClick={() => {
          console.log(value, 'NumberView value');
        }}
      >
        {value instanceof Array &&
          value.length > 0 &&
          value.map((element, index) => {
            if (index === 0) {
              return (
                <Col key="first">
                  <Statistic precision={2} value={element} {...this.props} />
                </Col>
              );
            }
            if (index === 1) {
              return (
                <Row key="second" justify="end" type="flex" style={{ textAlign: 'right' }}>
                  <Col>
                    <span
                      onClick={() => {
                        console.log(value);
                      }}
                    >
                      &nbsp;/&nbsp;
                    </span>
                  </Col>
                  <Col>
                    <Statistic precision={2} value={element} {...this.props} />
                  </Col>
                </Row>
              );
            }
            return (
              <Row key="third" justify="end" type="flex" style={{ textAlign: 'right' }}>
                <Col>
                  <span
                    onClick={() => {
                      console.log(value);
                    }}
                  >
                    &nbsp;/&nbsp;
                  </span>
                </Col>
                <Col>
                  <Statistic precision={2} value={element} {...this.props} />
                </Col>
              </Row>
            );
          })}
      </Row>
    );
  }
}
